<template>
  <div class="my-view" ref="outContainer">
    <div class="show-container" ref="showContainer">
      <div class="main-view" ref="realContainer">
        <div v-for="(item, index) of data" :key="index" class="show-item">{{ item }}</div>
      </div>
      <div class="senc-view">
        <div v-for="(item, index) of data" :key="index" class="show-item">{{ item }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mixins: [],
  components: {},
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  watch: {
    data: {
      deep: true,
      handler (){
        this.$nextTick(() => {
          this.run()
        })
      }
    }
  },
  data() {
    return {
      offTop: 0,
      lastPositopn: `translate(0px, 0px)`,
      timer: null,
      animation: null,
    }
  },
  destroyed() {
    this.stopAll()
  },
  methods: {
    stopAll() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      if(this.animation) {
        this.animation.cancel()
      }
      let outContainer = this.$refs.outContainer
      let showContainer = this.$refs.showContainer
      let realContainer = this.$refs.realContainer
      if (!outContainer) {
        return
      }
      showContainer.style.transform = `translate(0px, 0px)`;
    },
    resetPosition() {
      this.offTop = 0;
      this.lastPositopn = `translate(0px, 0px)`;
      this.drawer();
    },
    run() {
      this.stopAll()
      this.resetPosition()
      // this.drawer()
      this.timer = setInterval(() => {
        this.drawer()
      }, 3000)
    },
    drawer() {
      let outContainer = this.$refs.outContainer
      let showContainer = this.$refs.showContainer
      let realContainer = this.$refs.realContainer
      if (!outContainer) {
        return
      }
      let outContainerHeight = outContainer.clientHeight
      let showContainerHeight = showContainer.clientHeight
      let realContainerHeight = realContainer.clientHeight
      if (outContainerHeight === realContainerHeight) {
        return
      }
      if (this.offTop === 0) {
        this.lastPositopn = `translate(0px, 0px)`
      }
      this.offTop += outContainerHeight
      let newPostion = `translate(0px, -${this.offTop}px)`
      this.animation = showContainer.animate(
        // 动画关键帧
        [
          { transform: this.lastPositopn }, // 起始状态
          { transform: newPostion } // 结束状态
        ],
        {
          duration: 1000, // 动画时长1000毫秒
          easing: 'ease-in-out', // 动画缓动函数
          fill: 'forwards' // 动画结束后保持最后一帧状态
        }
      )
      this.animation.finished
        .then(() => {
          this.lastPositopn = newPostion
        })
        .catch(() => {
          this.lastPositopn = `translate(0px, 0px)`
          this.offTop = 0
        })
      if (this.offTop >= realContainerHeight) {
        this.lastPositopn = `translate(0px, 0px)`
        this.offTop = 0
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.run()
    })
  },
  created() {}
}
</script>

<style lang="scss" scoped>
.my-view {
  height: 30px;
  overflow: hidden;
  .show-item {
    line-height: 30px;
  }
}
</style>
